React to framework webowy przeznaczony do tworzenia interfejsów użytkownika (UI) dla stron WWW i aplikacji, w sposób deklaratywny, przy użyciu JavaScriptu, w tym składni JSX jaka poszerza JavaScript o obsługę znaczników. Syntaktyka JSX wzorowana jest na XML. React pozostaje wykorzystywany m.in. przez Netflixa i Facebooka.

Programista Androida lub iOS może skorzystać z biblioteki React Native, w celu zaimplementowania interaktywnego interfejsu użytkownika, dla pisanych natywnie aplikacji mobilnych, skoro jego komponenty są agnostyczne względem platformy. React może być łączony z zewnętrznymi bibliotekami i frameworkami, takimi jak remarkable, tym samym dodać obsługę znaczników Markdown.

Paradygmat deklaratywny zastosowany w React polega na określeniu przez dewelopera warunków dla danego widoku, jakie muszą zaistnieć w celu jego automatycznego wyrenderowania (w sensie odciążenia programisty w pisaniu kodu) po odświeżeniu stanu aplikacji, gdy zmienią się dane na wejściu. Poszczególne elementy UI są tworzone w izolacji od siebie, aby móc elastycznie osiągnąć, z niewielkich partii kodu, złożony efekt końcowy. W założeniu zapewnić ma to przewidywalność zachowania wykonywanego kodu i ułatwić debugowanie.

Lista zmian React v16.13.0:

1. Nowe ostrzeżenia dotyczące niektórych aktualizacji widoku podczas renderowania.

   Komponent Reacta nie powinien powodować niezamierzonych efektów u innych komponentów w czasie renderowania.

   Wywołanie setState podczas renderowania jest obsługiwane tylko w danym komponencie. Użycie setState podczas renderowania innego komponentu będzie skutkować wyświetleniem ostrzeżenia:

   Warning: Cannot update a component from inside the function body of a different component.

   Owe ostrzeżenie pomoże odnaleźć błędy aplikacji spowodowane niezamierzonymi zmianami stanu. W rzadkim przypadku, gdy celowo wymusza się zmianę stanu jednego komponentu jako efekt renderowania drugiego,to można umieścić wywołanie setState wewnątrz funkcji za pomocą useEffect.

2. Nowe ostrzeżenie dotyczące sprzecznych reguł stylu.

   Podczas dynamicznego stosowania stylu zawierającego długie i krótsze wersje właściwości CSS określone kombinacje aktualizacji mogą powodować niespójne stylizowanie. Na przykład:

   <div style={toggle ? 
    { background: 'blue', backgroundColor: 'red' } : 
    { backgroundColor: 'red' }
   }>
    ...
   </div>

   Można oczekiwać, że <div> będzie zawsze miał czerwone tło, bez względu na wartość toggle (przełączania). Jednak po naprzemiennym ustawieniu wartości toggle między true a false kolor tła staje się czerwony, a następnie, na przemian, przezroczysty i niebieski, jak widać w tym demo.

   React wykrywa teraz sprzeczne reguły stylu i zwraca ostrzeżenie. Aby rozwiązać ów problem, nie wolno mieszać pełnej i skróconej notacji właściwości w deklaracjach CSS.

3. Wprowadzono ostrzeżenia do odniesień wobec przestarzałego String Refs.

   Jest to stary interfejs API, toteż odradzane jest jego użycie i będzie ono ogłoszone przestarzałym w przyszłości, tj. usuniętym ze specyfikacji.

   <Button ref = "myRef" />

   (Nie należy mylić String Refs z refs, które pozostają w pełni obsługiwane).

   W przyszłości zapewniony zostanie zautomatyzowany skrypt („codemod”), aby przeprowadzić migrację ze String Refs. Jednak w niektórych rzadkich przypadkach nie jest możliwe zautomatyzowanie tego przebiegu. Ta wersja dodaje z wyprzedzeniem nowe ostrzeżenie tylko dla takich przypadków.

   Na przykład uruchomi się, jeśli użyjesz String Refs razem ze wzorcem Render Prop:

   class ClassWithRenderProp extends React.Component {
    componentDidMount() {
    doSomething(this.refs.myRef);
    }
    render() {
    return this.props.children();
    }
   }
   
   class ClassParent extends React.Component {
    render() {
    return (
    <ClassWithRenderProp>
    {() => <Button ref="myRef" />}
    </ClassWithRenderProp>
    );
    }
   }

   Taki kod bywa podatny na błędy. Można się spodziewać, że odwołanie będzie dostępne na ClassParent, ale zamiast tego zostanie umieszczone na ClassWithRenderProp.

   Najprawdopodobniej nie masz takiego kodu. Jeżeli taki napisałeś i było to zamierzone, przekonwertuj go na React.createRef(). Tego typu zmiana wprowadzona w powyższym listingu zaprezentowana poniżej:

   class ClassWithRenderProp extends React.Component {
    myRef = React.createRef();
    componentDidMount() {
    doSomething(this.myRef.current);
    }
    render() {
    return this.props.children(this.myRef);
    }
   }
   
   class ClassParent extends React.Component {
    render() {
    return (
    <ClassWithRenderProp>
    {myRef => <Button ref={myRef} />}
    </ClassWithRenderProp>
    );
    }
   }

   Aby móc ujrzeć tego typu ostrzeżenie należy zainstalować plugin babel-plugin-transform-react-jsx-self i włączyć go w środowisku programistycznym.

4. Przestarzałe React.createFactory

   React.createFactory to starszy pomocnik do tworzenia elementów React. Ta wersja dodaje ostrzeżenie o wycofaniu do metody. Zostanie on usunięty w przyszłej wersji głównej.

   Należy zastąpić użycie React.createFactory zwykłym JSX. Alternatywnie można skopiować i wkleić ten pomocnik jednowierszowy lub opublikować go jako bibliotekę.

   let createFactory = type => React.createElement.bind (null, type);

   Robi dokładnie to samo.

5. Przestarzałe ReactDOM.unstable_createPortal na rzecz ReactDOM.createPortal.

   Kiedy React 16 został wydany, createPortal stało się oficjalnie obsługiwanym API.

   Zachowaliśmy jednak unstable_createPortal jako alias, aby utrzymać działanie kilku bibliotek, do jakich wprowadzono tego obsługę. Obecnie pragniemy wycofać ów niestabilny alias. Lepiej użyć createPortal bezpośrednio zamiast unstable_createPortal. Ono ma dokładnie taką samą sygnaturę.

6. Ta wersja zawiera kilka innych znaczących ulepszeń:

   W Trybie Ścisłego Rozwoju (Strict Development Mode), React wywołuje funkcję cyklu życia (refaktoryzacja) dwukrotnie, aby usunąć wszelkie niepożądane zmiany. Ta wersja dodaje to zachowanie do shouldComponentUpdate. Nie powinno to wpływać na większość kodu, chyba że wystąpią niezamierzone zmiany w shouldComponentUpdate. Aby tego uniknąć należy przenieść taki kod do componentDidUpdate.

   W Trybie Ścisłego Rozwoju ostrzeżenia w kontekście użycia starszego API nie zawierały stosu dla komponentu jaki wywołał ostrzeżenie. Ta wersja dodaje brakujący stos do ostrzeżenia.

   onMouseEnter nie uruchamia się teraz na wyłączonych elementach <button>.

   ReactDOM brakowało wersji przeznaczonej do wyeksportowania projektu, odkąd opublikowano wersję 16. To wydanie dodaje je z powrotem. Nie jest zalecane użycie tego w logice aplikacji, ale jest to przydatne podczas debugowania problemów z niedopasowaniem czy wieloma wersjami ReactDOM na tej samej stronie.

Pełna lista zmian po angielsku.